<template>
  <div>
    <el-col :span="12">
      <el-form-item :label="$t(label)" :prop="Object.values(field)[0]">
        <el-cascader
          ref="cascader"
          v-model="value"
          :options="options"
          :props="cascaderProps"
          @change="handleChange"
        />
      </el-form-item>
    </el-col>
  </div>
</template>

<script>
import { selectCascaderLazy, selectCascaderLazyEcho } from '@/api/system/area/sysArea'

export default {
  components: {},
  props: {
    // form
    busData: {
      type: Object,
      required: true
    },
    /** 传一个对象, 对象中有四个参数 国,省,市,区, 按正常操作, 用哪个传那个 按顺序填写 **/
    field: {
      type: Object,
      default() {
        return { country: 'country', province: 'province', city: 'city', area: 'area' }
      },
      required: true
    },
    // 默认展示中国的(1: 中国地域的ID)
    parentId: {
      type: String,
      default: () => '1'
    },
    label: {
      type: String,
      default: () => '注册省市'
    }
  },
  data() {
    return {
      // 遮盖层
      loading: false,
      value: '',
      options: [],
      cascaderProps: {
        lazy: true,
        value: 'id',
        label: 'name',
        lazyLoad: this.lazyLoad
      }
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
    // 使用 $watch 监听数组的变化 根据表单中选中的省市查出来这些数据用户回显
    Object.keys(this.field).forEach(key => {
      var keyTemp = this.field[key]
      this.$watch('busData.' + keyTemp, () => {
          this.showValue()
      }, { deep: true, immediate: true })
    })
  },
  methods: {
    lazyLoad(node, resolve) {
      const parentId = node.value || this.parentId
      const { level } = node
      selectCascaderLazy(parentId).then(response => {
        // 通过调用resolve将子节点数据返回，通知组件数据加载完成
        if (level >= Object.keys(this.field).length - 1) {
          response.data && response.data.forEach(item => {
            item.leaf = true
          })
        }
        resolve(response.data)
      })
    },
    handleChange(val) {
      Object.keys(this.field).forEach((key, index) => {
        this.$set(this.busData, this.field[key], val[index])
      })
    },
    showValue() {
      // 找到最后那个值, 这里可能存在只填写了省市, 没有地区, 所以要定位一下最后一个填写的是哪个字段
      var keyTemp = ''
      for (let i = Object.keys(this.field).length - 1; i >= 0; i--) {
        if (keyTemp === '') {
          keyTemp = Object.keys(this.field)[i]
          if (this.isEmpty(this.busData[this.field[keyTemp]])) {
            keyTemp = ''
          }
        }
      }
      this.$refs.cascader.inputValue = ''
      this.value = []
      // 找到了最后一个有值的字段. 开始向上查找
      if (!this.isEmpty(keyTemp)) {
        selectCascaderLazyEcho(this.busData[this.field[keyTemp]]).then(response => {
          var inputValue = []
          var valueTemp = []
          var json = response.data
          Object.keys(this.field).forEach((key) => {
            json && json.forEach(item => {
              if (item.id === this.busData[this.field[key]]) {
                inputValue.push(item.name)
                valueTemp.push(item.id)
              }
            })
          })
          this.$refs.cascader.inputValue = inputValue.join(' / ')
          this.value = valueTemp
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
